<template>
  <div style="background: #fff; padding: 15px">
    <p>默认客源不可删除，不可更改名字与拖动排序，可更改客源颜色。</p>
    <div class="list">
      <div class="item" v-for="(item, index) in list1" :key="index">
        <el-color-picker
          v-model="item.color"
          @change="save(item.id, item.color, item.guestSource)"
        ></el-color-picker>
        <span>{{ item.guestSource }}</span>
      </div>
    </div>
    <div class="addItem">
      <div class="item" v-for="(item, index) in list2" :key="index">
        <el-color-picker v-model="item.color"></el-color-picker>
        <span class="span" v-if="!item.edit">{{ item.guestSource }}</span>
        <el-input
          v-model="item.guestSource"
          placeholder=""
          class="input"
          v-if="item.edit"
        ></el-input>

        <i
          class="el-icon-edit"
          @click="edit(index)"
          v-if="$hasPermission('guest:guest:update') && !item.edit"
        ></i>
        <i
          class="el-icon-check"
          @click="save(item.id, item.color, item.guestSource)"
          v-if="item.edit"
        ></i>
        <i
          class="el-icon-delete"
          @click="deleteHandle(item.id, index)"
          v-if="$hasPermission('guest:guest:delete') && item.id"
        ></i>

        <i class="el-icon-close" @click="del(index)" v-if="!item.id"></i>
      </div>
    </div>
    <el-button
      type="primary"
      @click="addItem()"
      v-if="$hasPermission('guest:guest:save')"
      >新增来源</el-button
    >
  </div>
</template>
<script>
import mixinViewModule from "@/mixins/view-module";
export default {
  mixins: [mixinViewModule],
  data() {
    return {
      mixinViewModuleOptions: {
        getDataListURL: "/hotel/guest/page",
        getDataListIsPage: true,
        deleteURL: "/hotel/guest",
        deleteIsBatch: true,
      },
      dataForm: {
        homestayId: this.$store.state.user.homestayId,
        color: "",
        guestSource: "",
      },
      list1: [],
      list2: [],
    };
  },
  watch: {
    dataList(newval, oldval) {
      this.list1 = [];
      this.list2 = [];
      if (newval != oldval) {
        for (let i = 0; i < newval.length; i++) {
          if (newval[i].isDefault) {
            this.list1.push(newval[i]);
          } else {
            this.list2.push(newval[i]);
          }
        }
      }
    },
  },
  methods: {
    edit(index) {
      var obj1 = Object.assign([], this.list2);
      obj1[index].edit = true;
      this.$set(this, "list2", obj1);
    },
    addItem() {
      this.list2.push({
        edit: true,
        color: "",
        guestSource: "",
      });
    },
    del(index) {
      this.list2.splice(index, 1);
    },
    save(id, color, guestSource) {
      this.$http[!id ? "post" : "put"]("/hotel/guest", {
        homestayId: this.$store.state.user.homestayId,
        color: color,
        id: id,
        guestSource: guestSource,
      })
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          }
          this.$message({
            message: this.$t("prompt.success"),
            type: "success",
            duration: 500,
            onClose: () => {
              this.visible = false;
              this.getDataList();
            },
          });
        })
        .catch(() => {});
    },
  },
};
</script>
<style scoped lang="scss">
.list {
  display: flex;
  gap: 15px;
  .item {
    display: flex;
    width: 25%;
    background-color: #fff;
    color: #333;
    align-items: center;
    span {
      margin-left: 10px;
      font-size: 16px;
    }
  }
}
.addItem {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin: 30px 0 20px;
  .item {
    padding: 15px;
    border-radius: 8px;
    width: 25%;
    display: flex;
    align-items: center;
    box-shadow: 0 0 9px rgba(0, 0, 0, 0.1);
    span {
      display: inline-block;
      width: 150px;
      margin-left: 10px;
    }
    .input {
      width: 150px;
      margin: 0 15px;
    }
    .el-icon-check,
    .el-icon-edit,
    .el-icon-delete,
    .el-icon-close {
      font-size: 24px;
    }
  }
}
</style>